<template>
    <div v-loading="file.loading">
        <el-space wrap size="large">
            <div v-for="li in file.items"
                 class="file_li"
                 :title="li.save_name"
                 @click="fileSelect(li)"
            >
                <div class="file_li_box" :class="{'active':file.selected.find((it:any) => it.path==li.path)}">
                    <div class="image" v-if="li.file_mime.includes('image')">
                        <mi-image :src="li.path" :preview="false" fit="contain"></mi-image>
                    </div>
                    <div class="image" v-else-if="li.type == 'video'">
                        <video width="96" height="96" controls>
                            <source :src="li.path">
                            您的浏览器不支持 video 属性。
                        </video>
                    </div>
                    <div class="file" v-else>
                        <mi-icon name="fas fa-file-archive"></mi-icon>
                    </div>
                </div>

                <div class="text">
                    {{li.original_name}}
                </div>
            </div>
        </el-space>

        <el-pagination background layout="prev, pager, next"
                       v-model:page-size="file.limit"
                       @update:page-size="limitChange"
                       v-model:current-page="file.page"
                       @update:current-page="pageChange"
                       :total="file.total" />
    </div>


</template>

<script setup lang="ts">

import {inject, onBeforeMount, reactive, ref, watch} from "vue";
import {msgError} from "@/utils/alert";
import {simpleGet} from "@/utils/request";

const props = withDefaults(defineProps<{
    limit:number,
}>(), {

})

const file: any = inject("file")
file.limit = 20

const emits = defineEmits(['selectChange'])

const selected = ref<any[]>([])

const getFiles = () => {
    file.loading = true
    simpleGet(`/index.upload/files`, {
        limit:file.limit,
        page:file.page,
    }).then(({items, total}) => {
        file.items = items
        file.loading = false
        file.total = total
    })
}

const fileSelect = (curr: any) => {
    const index = file.selected.findIndex((item:any) => {
        return item.path == curr.path
    })
    if (index == -1){
        if (props.limit == 1){  // 单选
            file.selected = [curr]
        }else { // 多选
            // 判断是否超过限制数量
            if (file.selected.length >= props.limit){
                msgError(`最多选择${props.limit}个文件`)
                return;
            }else {
                file.selected.push(curr)
            }
        }

    }else {
        file.selected.splice(index,1)
    }

    emits('selectChange', file.selected)
}

const pageChange = () => {
    getFiles()
}
const limitChange = () => {

}

onBeforeMount(() => {
    getFiles()
})

</script>

<style scoped lang="scss">
.file_li {
    //padding: 15px;
    //background-color: #fff;
    cursor: pointer;
    width: 96px;
    padding: 2px;

    .file_li_box{
        position: relative;

        &.active:before {
            content: "";
            position: absolute;
            right: 0; left: 0; top: 0; bottom: 0;
            border: 3px solid #03ccef;
            border-radius: 4px;
            z-index: 999;
        }
    }



    .image {
        width: 100%;
        height: 96px;
        //color: #FF9000;

    }

    .file {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 48px;
        background-color: #fff;
        color: #5ca284;
        @extend .image
    }

    .text {
        padding: .5em 0;
        overflow: hidden;
        width: 100%;
        font-size: 12px;
        text-overflow: ellipsis;
    }
}
</style>
